{extend name="common@base/common" /}

{block name="style"}
<link href="__CSS__/main.min.css" rel="stylesheet" type="text/css"/>
{/block}

{block name="body"}
<div class="container">
  <ol class="breadcrumb">
      <li><a href="{:url('index/index')}">演示首页</a></li>
      <li>树形菜单</li>
  </ol>
<section class="demo-section">
<div id="pageContent">
<style>
.nav-examples > li > a > code {display: none}
.nav-examples > li.active > a > code {display: inline;}
</style>


<article><p>树形菜单提供一种展示层级关系（例如文件系统目录）菜单的视图。</p></article>





<section><header><h3>综合示例</h3></header><article><p>下方展示了一个树形菜单，当一个链接包含一个子菜单时，通过点击链接左侧的图标可以展开内部子菜单。子菜单中的链接也可以包含另一个子菜单。</p><p>要构建一个树形菜单，只需要按层级嵌套 <code>&lt;ul&gt;</code>，并为顶层节点添加 <code>[data-ride="tree"]</code> 属性。</p><div class="example">
  <ul id="treeExample" class="tree" data-ride="tree" data-initial-state="preserve" data-idx="0">
    <li data-idx="1" data-id="1" class="has-list"><i class="list-toggle icon"></i>
      <a href="#">水果</a>
      <ul data-idx="1">
        <li data-idx="1" data-id="1-1"><a href="#">苹果</a></li>
        <li data-idx="2" data-id="1-2" class="has-list"><i class="list-toggle icon"></i>
          <a href="#">热带水果</a>
          <ul data-idx="2">
            <li data-idx="1" data-id="1-2-1"><a href="#">香蕉</a></li>
            <li data-idx="2" data-id="1-2-2"><a href="#">芒果</a></li>
            <li data-idx="3" data-id="1-2-3"><a href="#">椰子</a></li>
            <li data-idx="4" data-id="1-2-4"><a href="#">菠萝</a></li>
          </ul>
        </li>
        <li data-idx="3" data-id="1-3"><a href="#">梨子</a></li>
        <li data-idx="4" data-id="1-4"><a href="#">草莓</a></li>
        <li data-idx="5" data-id="1-5"><a href="#">杏</a></li>
        <li data-idx="6" data-id="1-6"><a href="#">桃子</a></li>
        <li data-idx="7" data-id="1-7"><a href="#">梅子</a></li>
      </ul>
    </li>
    <li data-idx="2" data-id="2" class="has-list"><i class="list-toggle icon"></i>
      <a href="#">蔬菜</a>
      <ul data-idx="2">
        <li data-idx="1" data-id="2-1" class="has-list"><i class="list-toggle icon"></i>
          <a href="#">我的菜</a>
          <ul data-idx="1">
            <li data-idx="1" data-id="2-1-1"><a href="#">青菜</a></li>
            <li data-idx="2" data-id="2-1-2"><a href="#">娃娃菜</a></li>
            <li data-idx="3" data-id="2-1-3"><a href="#">菠菜</a></li>
            <li data-idx="4" data-id="2-1-4"><a href="#">甘蓝</a></li>
          </ul>
        </li>
        <li data-idx="2" data-id="2-2" class="has-list"><i class="list-toggle icon"></i>
          <a href="#">你的瓜</a>
          <ul data-idx="2">
            <li data-idx="1" data-id="2-2-1"><a href="#">黄瓜</a></li>
            <li data-idx="2" data-id="2-2-2"><a href="#">南瓜</a></li>
            <li data-idx="3" data-id="2-2-3"><a href="#">丝瓜</a></li>
            <li data-idx="4" data-id="2-2-4"><a href="#">苦瓜</a></li>
            <li data-idx="5" data-id="2-2-5"><a href="#">木瓜</a></li>
          </ul>
        </li>
        <li data-idx="3" data-id="2-3"><a href="#">白蓝</a></li>
        <li data-idx="4" data-id="2-4"><a href="#">土豆</a></li>
        <li data-idx="5" data-id="2-5"><a href="#">茄子</a></li>
      </ul>
    </li>
    <li data-idx="3" data-id="3" class="has-list"><i class="list-toggle icon"></i>
      <a href="#">甜点</a>
      <ul data-idx="3">
        <li data-idx="1" data-id="3-1"><a href="#">蛋糕</a></li>
        <li data-idx="2" data-id="3-2"><a href="#">冰淇淋</a></li>
        <li data-idx="3" data-id="3-3"><a href="#">果冻</a></li>
      </ul>
    </li>
    <li class="open has-list in" data-idx="4" data-id="4"><i class="list-toggle icon"></i>
      <a href="#">坚果</a>
      <ul data-idx="4">
        <li data-idx="1" data-id="4-1" class="tree-single-item"><a href="#">瓜子</a></li>
      </ul>
    </li>
    <li data-idx="5" data-id="5" class="has-list"><i class="list-toggle icon"></i>
      <a href="#">饮料</a>
      <ul data-idx="5">
        <li data-idx="1" data-id="5-1"><a href="#">咖啡</a></li>
        <li data-idx="2" data-id="5-2"><a href="#">茶</a></li>
      </ul>
    </li>
    <li data-idx="6" data-id="6"><a href="#">酒水</a></li>
    <li data-idx="7" data-id="7"><a href="#">粥饭</a></li>
  </ul>
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;ul</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"tree"</span><span class="pln"> </span><span class="atn">data-ride</span><span class="pun">=</span><span class="atv">"tree"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;li&gt;</span><span class="pln">
    </span><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="tag">&gt;</span><span class="pln">水果</span><span class="tag">&lt;/a&gt;</span><span class="pln">
    </span><span class="tag">&lt;ul&gt;</span><span class="pln">
      </span><span class="tag">&lt;li&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="tag">&gt;</span><span class="pln">苹果</span><span class="tag">&lt;/a&gt;&lt;/li&gt;</span><span class="pln">
      </span><span class="tag">&lt;li&gt;</span><span class="pln">
        </span><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="tag">&gt;</span><span class="pln">热带水果</span><span class="tag">&lt;/a&gt;</span><span class="pln">
        </span><span class="tag">&lt;ul&gt;</span><span class="pln">
          ...
        </span><span class="tag">&lt;/ul&gt;</span><span class="pln">
      </span><span class="tag">&lt;/li&gt;</span><span class="pln">
      </span><span class="tag">&lt;li&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="tag">&gt;</span><span class="pln">梨子</span><span class="tag">&lt;/a&gt;&lt;/li&gt;</span><span class="pln">
      ...
    </span><span class="tag">&lt;/ul&gt;</span><span class="pln">
  </span><span class="tag">&lt;/li&gt;</span><span class="pln">
  </span><span class="tag">&lt;li&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="tag">&gt;</span><span class="pln">粥饭</span><span class="tag">&lt;/a&gt;&lt;/li&gt;</span><span class="pln">
  ...
</span><span class="tag">&lt;/ul&gt;</span></code></pre></article></section>





<script>
$('#treeMenu').on('click', 'a', function() {
    $('#treeMenu li.active').removeClass('active');
    $(this).closest('li').addClass('active');
});
</script>

<section><header><h3>树形导航菜单</h3></header><article><p>为 <code>.tree</code> 元素增加 <code>.tree-menu</code> 类可以获得树形导航外观。</p><div class="example">
  <nav class="menu" data-ride="menu" style="width: 200px">
    <ul id="treeMenu" class="tree tree-menu" data-ride="tree" data-idx="0">
      <li data-idx="1" data-id="1"><a href="#"><i class="icon icon-th"></i>首页</a></li>
      <li data-idx="2" data-id="2"><a href="#"><i class="icon icon-user"></i>个人资料</a></li>
      <li data-idx="3" data-id="3" class="has-list"><i class="list-toggle icon"></i>
        <a href="#"><i class="icon icon-time"></i>更新时间</a>
        <ul data-idx="3">
          <li data-idx="1" data-id="3-1"><a href="#">今天</a></li>
          <li data-idx="2" data-id="3-2"><a href="#">明天</a></li>
          <li data-idx="3" data-id="3-3"><a href="#">昨天</a></li>
          <li data-idx="4" data-id="3-4"><a href="#">本周</a></li>
        </ul>
      </li>
      <li data-idx="4" data-id="4"><a href="#"><i class="icon icon-trash"></i>垃圾篓</a></li>
      <li data-idx="5" data-id="5"><a href="#"><i class="icon icon-list-ul"></i>全部</a></li>
      <li class="open has-list has-active-item in" data-idx="6" data-id="6"><i class="list-toggle icon"></i>
        <a href="#"><i class="icon icon-tasks"></i>状态</a>
        <ul data-idx="6">
          <li data-idx="1" data-id="6-1" class="has-list"><i class="list-toggle icon"></i>
            <a href="#"><i class="icon icon-circle-blank"></i>已就绪</a>
            <ul data-idx="1">
              <li data-idx="1" data-id="6-1-1"><a href="#">已取消</a></li>
              <li data-idx="2" data-id="6-1-2"><a href="#">已关闭</a></li>
            </ul>
          </li>
          <li class="active" data-idx="2" data-id="6-2"><a href="#"><i class="icon icon-play-sign"></i>进行中</a></li>
          <li data-idx="3" data-id="6-3"><a href="#"><i class="icon icon-ok-sign"></i>已完成</a></li>
        </ul>
      </li>
    </ul>
  </nav>
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;nav</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"menu"</span><span class="pln"> </span><span class="atn">data-ride</span><span class="pun">=</span><span class="atv">"menu"</span><span class="pln"> </span><span class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span class="pln">width</span><span class="pun">:</span><span class="pln"> </span><span class="lit">200px</span><span class="atv">"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;ul</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"treeMenu"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"tree tree-menu"</span><span class="pln"> </span><span class="atn">data-ride</span><span class="pun">=</span><span class="atv">"tree"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;li&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="tag">&gt;&lt;i</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"icon icon-th"</span><span class="tag">&gt;&lt;/i&gt;</span><span class="pln">首页</span><span class="tag">&lt;/a&gt;&lt;/li&gt;</span><span class="pln">
    </span><span class="tag">&lt;li&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="tag">&gt;&lt;i</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"icon icon-user"</span><span class="tag">&gt;&lt;/i&gt;</span><span class="pln">个人资料</span><span class="tag">&lt;/a&gt;&lt;/li&gt;</span><span class="pln">
    </span><span class="tag">&lt;li&gt;</span><span class="pln">
      </span><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="tag">&gt;&lt;i</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"icon icon-time"</span><span class="tag">&gt;&lt;/i&gt;</span><span class="pln">更新时间</span><span class="tag">&lt;/a&gt;</span><span class="pln">
      </span><span class="tag">&lt;ul&gt;</span><span class="pln">
        </span><span class="tag">&lt;li&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="tag">&gt;</span><span class="pln">今天</span><span class="tag">&lt;/a&gt;&lt;/li&gt;</span><span class="pln">
        </span><span class="tag">&lt;li&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="tag">&gt;</span><span class="pln">明天</span><span class="tag">&lt;/a&gt;&lt;/li&gt;</span><span class="pln">
        </span><span class="tag">&lt;li&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="tag">&gt;</span><span class="pln">昨天</span><span class="tag">&lt;/a&gt;&lt;/li&gt;</span><span class="pln">
        </span><span class="tag">&lt;li&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="tag">&gt;</span><span class="pln">本周</span><span class="tag">&lt;/a&gt;&lt;/li&gt;</span><span class="pln">
      </span><span class="tag">&lt;/ul&gt;</span><span class="pln">
    </span><span class="tag">&lt;/li&gt;</span><span class="pln">
    </span><span class="tag">&lt;li&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="tag">&gt;&lt;i</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"icon icon-trash"</span><span class="tag">&gt;&lt;/i&gt;</span><span class="pln">垃圾篓</span><span class="tag">&lt;/a&gt;&lt;/li&gt;</span><span class="pln">
    </span><span class="tag">&lt;li&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="tag">&gt;&lt;i</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"icon icon-list-ul"</span><span class="tag">&gt;&lt;/i&gt;</span><span class="pln">全部</span><span class="tag">&lt;/a&gt;&lt;/li&gt;</span><span class="pln">
    </span><span class="tag">&lt;li</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"open"</span><span class="tag">&gt;</span><span class="pln">
      </span><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="tag">&gt;&lt;i</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"icon icon-tasks"</span><span class="tag">&gt;&lt;/i&gt;</span><span class="pln">状态</span><span class="tag">&lt;/a&gt;</span><span class="pln">
      </span><span class="tag">&lt;ul&gt;</span><span class="pln">
        </span><span class="tag">&lt;li&gt;</span><span class="pln">
          </span><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="tag">&gt;&lt;i</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"icon icon-circle-blank"</span><span class="tag">&gt;&lt;/i&gt;</span><span class="pln">已就绪</span><span class="tag">&lt;/a&gt;</span><span class="pln">
          </span><span class="tag">&lt;ul&gt;</span><span class="pln">
            </span><span class="tag">&lt;li&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="tag">&gt;</span><span class="pln">已取消</span><span class="tag">&lt;/a&gt;&lt;/li&gt;</span><span class="pln">
            </span><span class="tag">&lt;li&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="tag">&gt;</span><span class="pln">已关闭</span><span class="tag">&lt;/a&gt;&lt;/li&gt;</span><span class="pln">
          </span><span class="tag">&lt;/ul&gt;</span><span class="pln">
        </span><span class="tag">&lt;/li&gt;</span><span class="pln">
        </span><span class="tag">&lt;li</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"active"</span><span class="tag">&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="tag">&gt;&lt;i</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"icon icon-play-sign"</span><span class="tag">&gt;&lt;/i&gt;</span><span class="pln">进行中</span><span class="tag">&lt;/a&gt;&lt;/li&gt;</span><span class="pln">
        </span><span class="tag">&lt;li&gt;&lt;a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"#"</span><span class="tag">&gt;&lt;i</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"icon icon-ok-sign"</span><span class="tag">&gt;&lt;/i&gt;</span><span class="pln">已完成</span><span class="tag">&lt;/a&gt;&lt;/li&gt;</span><span class="pln">
      </span><span class="tag">&lt;/ul&gt;</span><span class="pln">
    </span><span class="tag">&lt;/li&gt;</span><span class="pln">
  </span><span class="tag">&lt;/ul&gt;</span><span class="pln">
</span><span class="tag">&lt;/nav&gt;</span></code></pre><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="com">// 手动通过点击模拟高亮菜单项</span><span class="pln">
$</span><span class="pun">(</span><span class="str">'#treeMenu'</span><span class="pun">).</span><span class="pln">on</span><span class="pun">(</span><span class="str">'click'</span><span class="pun">,</span><span class="pln"> </span><span class="str">'a'</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    $</span><span class="pun">(</span><span class="str">'#treeMenu li.active'</span><span class="pun">).</span><span class="pln">removeClass</span><span class="pun">(</span><span class="str">'active'</span><span class="pun">);</span><span class="pln">
    $</span><span class="pun">(</span><span class="kwd">this</span><span class="pun">).</span><span class="pln">closest</span><span class="pun">(</span><span class="str">'li'</span><span class="pun">).</span><span class="pln">addClass</span><span class="pun">(</span><span class="str">'active'</span><span class="pun">);</span><span class="pln">
</span><span class="pun">});</span></code></pre></article></section>

















<section><header><h3>外观选项</h3></header><article><h4>在层级菜单之间显示连接线</h4><p><code>.tree-lines</code></p><div class="example">
  <ul class="tree tree-lines" data-ride="tree" data-idx="0">
    <li class="open has-list in" data-idx="1" data-id="1"><i class="list-toggle icon"></i>
      <a href="#">水果</a>
      <ul data-idx="1">
        <li data-idx="1" data-id="1-1"><a href="#">苹果</a></li>
        <li data-idx="2" data-id="1-2" class="has-list"><i class="list-toggle icon"></i>
          <a href="#">热带水果</a>
          <ul data-idx="2">
            <li data-idx="1" data-id="1-2-1"><a href="#">香蕉</a></li>
            <li data-idx="2" data-id="1-2-2"><a href="#">芒果</a></li>
            <li data-idx="3" data-id="1-2-3"><a href="#">椰子</a></li>
            <li data-idx="4" data-id="1-2-4"><a href="#">菠萝</a></li>
          </ul>
        </li>
        <li data-idx="3" data-id="1-3"><a href="#">梨子</a></li>
        <li data-idx="4" data-id="1-4"><a href="#">草莓</a></li>
        <li data-idx="5" data-id="1-5"><a href="#">杏</a></li>
        <li data-idx="6" data-id="1-6"><a href="#">桃子</a></li>
        <li data-idx="7" data-id="1-7" class="has-list"><i class="list-toggle icon"></i>
          <a href="#">莓</a>
          <ul data-idx="7">
            <li data-idx="1" data-id="1-7-1" class="tree-single-item"><a href="">黑莓</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li data-idx="2" data-id="2" class="has-list"><i class="list-toggle icon"></i>
      <a href="#">蔬菜</a>
      <ul data-idx="2">
        <li data-idx="1" data-id="2-1" class="has-list"><i class="list-toggle icon"></i>
          <a href="#">我的菜</a>
          <ul data-idx="1">
            <li data-idx="1" data-id="2-1-1"><a href="#">青菜</a></li>
            <li data-idx="2" data-id="2-1-2"><a href="#">娃娃菜</a></li>
            <li data-idx="3" data-id="2-1-3"><a href="#">菠菜</a></li>
            <li data-idx="4" data-id="2-1-4"><a href="#">甘蓝</a></li>
          </ul>
        </li>
        <li data-idx="2" data-id="2-2" class="has-list"><i class="list-toggle icon"></i>
          <a href="#">你的瓜</a>
          <ul data-idx="2">
            <li data-idx="1" data-id="2-2-1"><a href="#">黄瓜</a></li>
            <li data-idx="2" data-id="2-2-2"><a href="#">南瓜</a></li>
            <li data-idx="3" data-id="2-2-3"><a href="#">丝瓜</a></li>
            <li data-idx="4" data-id="2-2-4"><a href="#">苦瓜</a></li>
            <li data-idx="5" data-id="2-2-5"><a href="#">木瓜</a></li>
          </ul>
        </li>
        <li data-idx="3" data-id="2-3"><a href="#">白蓝</a></li>
        <li data-idx="4" data-id="2-4"><a href="#">土豆</a></li>
        <li data-idx="5" data-id="2-5"><a href="#">茄子</a></li>
      </ul>
    </li>
  </ul>
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;ul</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"tree tree-lines"</span><span class="pln"> </span><span class="atn">data-ride</span><span class="pun">=</span><span class="atv">"tree"</span><span class="tag">&gt;</span><span class="pln">
  ...
</span><span class="tag">&lt;/ul&gt;</span></code></pre><h4>使用不同的图标</h4><h5>内置图标类型</h5><div class="example">
  <ul class="nav nav-tabs" id="treeIconsExampleNav" style="margin: -21px -21px 10px -21px; background-color: #fafafa">
    <li class="active"><a href="###">默认</a></li>
    <li><a href="folders">文件夹<code>.tree-folders</code></a></li>
    <li><a href="chevrons">V形<code>.tree-chevrons</code></a></li>
    <li><a href="angles">直角<code>.tree-angles</code></a></li>
  </ul>
  <ul class="tree tree-lines" id="treeIconsExample" data-ride="tree" data-idx="0">
    <li class="open has-list in" data-idx="1" data-id="1"><i class="list-toggle icon"></i>
      <a href="#">水果</a>
      <ul data-idx="1">
        <li data-idx="1" data-id="1-1"><a href="#">苹果</a></li>
        <li data-idx="2" data-id="1-2" class="has-list"><i class="list-toggle icon"></i>
          <a href="#">热带水果</a>
          <ul data-idx="2">
            <li data-idx="1" data-id="1-2-1"><a href="#">香蕉</a></li>
            <li data-idx="2" data-id="1-2-2"><a href="#">芒果</a></li>
            <li data-idx="3" data-id="1-2-3"><a href="#">椰子</a></li>
            <li data-idx="4" data-id="1-2-4"><a href="#">菠萝</a></li>
          </ul>
        </li>
        <li data-idx="3" data-id="1-3"><a href="#">梨子</a></li>
        <li data-idx="4" data-id="1-4"><a href="#">草莓</a></li>
        <li data-idx="5" data-id="1-5"><a href="#">杏</a></li>
        <li data-idx="6" data-id="1-6"><a href="#">桃子</a></li>
        <li data-idx="7" data-id="1-7"><a href="#">梅子</a></li>
      </ul>
    </li>
    <li data-idx="2" data-id="2" class="has-list"><i class="list-toggle icon"></i>
      <a href="#">蔬菜</a>
      <ul data-idx="2">
        <li data-idx="1" data-id="2-1" class="has-list"><i class="list-toggle icon"></i>
          <a href="#">我的菜</a>
          <ul data-idx="1">
            <li data-idx="1" data-id="2-1-1"><a href="#">青菜</a></li>
            <li data-idx="2" data-id="2-1-2"><a href="#">娃娃菜</a></li>
            <li data-idx="3" data-id="2-1-3"><a href="#">菠菜</a></li>
            <li data-idx="4" data-id="2-1-4"><a href="#">甘蓝</a></li>
          </ul>
        </li>
        <li data-idx="2" data-id="2-2" class="has-list"><i class="list-toggle icon"></i>
          <a href="#">你的瓜</a>
          <ul data-idx="2">
            <li data-idx="1" data-id="2-2-1"><a href="#">黄瓜</a></li>
            <li data-idx="2" data-id="2-2-2"><a href="#">南瓜</a></li>
            <li data-idx="3" data-id="2-2-3"><a href="#">丝瓜</a></li>
            <li data-idx="4" data-id="2-2-4"><a href="#">苦瓜</a></li>
            <li data-idx="5" data-id="2-2-5"><a href="#">木瓜</a></li>
          </ul>
        </li>
        <li data-idx="3" data-id="2-3"><a href="#">白蓝</a></li>
        <li data-idx="4" data-id="2-4"><a href="#">土豆</a></li>
        <li data-idx="5" data-id="2-5"><a href="#">茄子</a></li>
      </ul>
    </li>
  </ul>
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;ul</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"tree tree-lines"</span><span class="pln"> </span><span class="atn">data-ride</span><span class="pun">=</span><span class="atv">"tree"</span><span class="tag">&gt;</span><span class="pln">
  ...
</span><span class="tag">&lt;/ul&gt;</span></code></pre><h5>使用CSS来自定义图标</h5><pre class="prettyprint prettyprinted" style=""><code class="lang-css"><span class="pln">tree</span><span class="pun">-</span><span class="pln">custom</span><span class="pun">-</span><span class="pln">icons </span><span class="pun">&gt;</span><span class="pln"> li </span><span class="pun">&gt;</span><span class="pln"> </span><span class="pun">.</span><span class="pln">list</span><span class="pun">-</span><span class="pln">toggle</span><span class="pun">:</span><span class="pln">before </span><span class="pun">{</span><span class="pln">content</span><span class="pun">:</span><span class="pln"> </span><span class="str">'\e6dd'</span><span class="pun">}</span><span class="pln">
</span><span class="pun">.</span><span class="pln">tree</span><span class="pun">-</span><span class="pln">custom</span><span class="pun">-</span><span class="pln">icons </span><span class="pun">&gt;</span><span class="pln"> li</span><span class="pun">.</span><span class="pln">open </span><span class="pun">&gt;</span><span class="pln"> </span><span class="pun">.</span><span class="pln">list</span><span class="pun">-</span><span class="pln">toggle</span><span class="pun">:</span><span class="pln">before </span><span class="pun">{</span><span class="pln">content</span><span class="pun">:</span><span class="pln"> </span><span class="str">'\e6df'</span><span class="pun">}</span></code></pre><h4>启用动画效果</h4><p><code>data-animate="true"</code></p><div class="example">
  <ul class="tree tree-lines tree-animate" data-ride="tree" data-animate="true" data-idx="0">
    <li class="open in has-list" data-idx="1" data-id="1"><i class="list-toggle icon"></i>
      <a href="#">水果</a>
      <ul data-idx="1">
        <li data-idx="1" data-id="1-1"><a href="#">苹果</a></li>
        <li data-idx="2" data-id="1-2" class="has-list"><i class="list-toggle icon"></i>
          <a href="#">热带水果</a>
          <ul data-idx="2">
            <li data-idx="1" data-id="1-2-1"><a href="#">香蕉</a></li>
            <li data-idx="2" data-id="1-2-2"><a href="#">芒果</a></li>
            <li data-idx="3" data-id="1-2-3"><a href="#">椰子</a></li>
            <li data-idx="4" data-id="1-2-4"><a href="#">菠萝</a></li>
          </ul>
        </li>
        <li data-idx="3" data-id="1-3"><a href="#">梨子</a></li>
        <li data-idx="4" data-id="1-4"><a href="#">草莓</a></li>
        <li data-idx="5" data-id="1-5"><a href="#">杏</a></li>
        <li data-idx="6" data-id="1-6"><a href="#">桃子</a></li>
        <li data-idx="7" data-id="1-7"><a href="#">梅子</a></li>
      </ul>
    </li>
    <li data-idx="2" data-id="2" class="has-list"><i class="list-toggle icon"></i>
      <a href="#">蔬菜</a>
      <ul data-idx="2">
        <li data-idx="1" data-id="2-1" class="has-list"><i class="list-toggle icon"></i>
          <a href="#">我的菜</a>
          <ul data-idx="1">
            <li data-idx="1" data-id="2-1-1"><a href="#">青菜</a></li>
            <li data-idx="2" data-id="2-1-2"><a href="#">娃娃菜</a></li>
            <li data-idx="3" data-id="2-1-3"><a href="#">菠菜</a></li>
            <li data-idx="4" data-id="2-1-4"><a href="#">甘蓝</a></li>
          </ul>
        </li>
        <li data-idx="2" data-id="2-2" class="has-list"><i class="list-toggle icon"></i>
          <a href="#">你的瓜</a>
          <ul data-idx="2">
            <li data-idx="1" data-id="2-2-1"><a href="#">黄瓜</a></li>
            <li data-idx="2" data-id="2-2-2"><a href="#">南瓜</a></li>
            <li data-idx="3" data-id="2-2-3"><a href="#">丝瓜</a></li>
            <li data-idx="4" data-id="2-2-4"><a href="#">苦瓜</a></li>
            <li data-idx="5" data-id="2-2-5"><a href="#">木瓜</a></li>
          </ul>
        </li>
        <li data-idx="3" data-id="2-3"><a href="#">白蓝</a></li>
        <li data-idx="4" data-id="2-4"><a href="#">土豆</a></li>
        <li data-idx="5" data-id="2-5"><a href="#">茄子</a></li>
      </ul>
    </li>
  </ul>
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;ul</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"tree tree-lines"</span><span class="pln"> </span><span class="atn">data-animate</span><span class="pun">=</span><span class="atv">"true"</span><span class="pln"> </span><span class="atn">data-ride</span><span class="pun">=</span><span class="atv">"tree"</span><span class="tag">&gt;</span><span class="pln">
  ...
</span><span class="tag">&lt;/ul&gt;</span></code></pre></article></section>





















































<script>
function afterPageLoad() {
    var $nav = $('#treeIconsExampleNav'),
        $example = $('#treeIconsExample'),
        $nameInCode = $('#treeIconsNameForExample');
    $nav.on('click', 'a', function(e) {
        var $a = $(this);
        $nav.find('li.active').removeClass('active');
        $a.parent('li').addClass('active');
        var name = $a.attr('href').replace(/#/g, '');
        if(name) name = ' tree-' + name;
        $nameInCode.text(name);
        $example.attr('class', 'tree tree-lines' + name);
        e.preventDefault();
    });

    $('[data-ride=tree]').tree();
}
</script>

<section><header><h3>用法</h3></header><article><h4>调用方式</h4><p>提供两种方式来使用树形菜单。</p><ul>
<li>为<code>ul.tree</code>结构添加<code>data-ride="tree"</code>属性，则会在文档加载完毕之后自动初始化树形菜单;</li>
<li>使用jQuery方法手动初始化树形菜单。</li>
</ul><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="pln">$</span><span class="pun">(</span><span class="str">'#tree'</span><span class="pun">).</span><span class="pln">tree</span><span class="pun">(</span><span class="pln">options</span><span class="pun">);</span></code></pre><h4>选项</h4><p>可用选项如下：</p><div class="table-responsive"><table class="table table-bordered">
  <thead>
    <tr>
      <th>选项</th>
      <th style="width: 80px">名称</th>
      <th style="width: 300px">可选值</th>
      <th>说明</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><code>animate</code></td>
      <td>动画效果</td>
      <td><em>   <code>true</code> 启用动画
</em>   <code>false</code>（默认） 禁用动画</td>
      <td></td>
    </tr>
    <tr>
      <td><code>initialState</code></td>
      <td>初始状态</td>
      <td><em>   <code>'normal'</code>（默认) 自动根据dom结构决定
</em>   <code>'expand'</code> 全部展开
<em>   <code>'collapse'</code> 全部折叠
</em>   <code>'preserve'</code> 从本地存储还原用户上次操作状态</td>
      <td>当使用<code>'normal'</code>选项时，如果一个<code>&lt;li&gt;</code>标签包含class<code>.open</code>且包含内部子菜单则子菜单（不包括子菜单的子菜单）在初始化之后会展开显示，其他情况下则折叠显示。</td>
    </tr>
    <tr>
      <td><code>data</code></td>
      <td>树节点数据</td>
      <td>数组，包含所有节点对象，可选</td>
      <td>格式参见本页面 <strong>数据加载与更新</strong> 章节。</td>
    </tr>
    <tr>
      <td><code>itemCreator</code></td>
      <td>节点创建函数</td>
      <td>函数</td>
      <td>节点创建函数用法参见本页面 <strong>数据加载与更新</strong> 章节。</td>
    </tr>
    <tr>
      <td><code>itemWrapper</code></td>
      <td>节点包装器</td>
      <td><em>   <code>false</code>（默认) 不启用节点包装器
</em>   <code>true</code> 启用默认节点包装器
<em>   例如 <code>'&lt;div class="my-tree-node/"&gt;'</code>：用来创建节点包装器的 HTML 文本</em></td>
      <td>用法参见本页面 <em>*数据加载与更新</em> 章节。</td>
    </tr>
  </tbody>
</table></div><p>参数可以在手动调用<code>$().tree(options)</code>方法时传入，或者以<code>data-*=""</code>形式指定。</p><h4>方法</h4><h5>展开节点</h5><p>方法可用形式如下：</p><ul>
<li><strong>expand()</strong></li>
<li><strong>expand(params)</strong></li>
<li><strong>expand(params, disabledAnimate)</strong></li>
</ul><p>参数定义如下：</p><ul>
<li><code>params</code>：一个jQuery<code>&lt;li&gt;</code>对象，指定需要展开的节点，当不使用此参数时则展开所有节点；</li>
<li><code>disabledAnimate</code>：是否禁用动画，默认 <code>false</code>；</li>
</ul><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="com">// 使用 tree 实例</span><span class="pln">
</span><span class="kwd">var</span><span class="pln"> myTree </span><span class="pun">=</span><span class="pln"> $</span><span class="pun">(</span><span class="str">'#tree'</span><span class="pun">).</span><span class="pln">data</span><span class="pun">(</span><span class="str">'zui.tree'</span><span class="pun">);</span><span class="pln">
myTree</span><span class="pun">.</span><span class="pln">expand</span><span class="pun">(</span><span class="pln">params</span><span class="pun">);</span><span class="pln">

</span><span class="com">// 使用 tree() 方式</span><span class="pln">
$</span><span class="pun">(</span><span class="str">'#tree'</span><span class="pun">).</span><span class="pln">tree</span><span class="pun">(</span><span class="str">'expand'</span><span class="pun">,</span><span class="pln"> params</span><span class="pun">);</span></code></pre><h5>折叠节点</h5><p>方法可用形式如下：</p><ul>
<li><strong>collapse()</strong></li>
<li><strong>collapse(params)</strong></li>
<li><strong>collapse(params, disabledAnimate)</strong></li>
</ul><p>参数定义如下：</p><ul>
<li><code>params</code>：一个jQuery<code>&lt;li&gt;</code>对象，指定需要折叠的节点，当不使用此参数时则折叠所有节点；</li>
<li><code>disabledAnimate</code>：是否禁用动画，默认 <code>false</code>；</li>
</ul><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="com">// 使用 tree 实例</span><span class="pln">
</span><span class="kwd">var</span><span class="pln"> myTree </span><span class="pun">=</span><span class="pln"> $</span><span class="pun">(</span><span class="str">'#tree'</span><span class="pun">).</span><span class="pln">data</span><span class="pun">(</span><span class="str">'zui.tree'</span><span class="pun">);</span><span class="pln">
myTree</span><span class="pun">.</span><span class="pln">collapse</span><span class="pun">(</span><span class="pln">params</span><span class="pun">);</span><span class="pln">

</span><span class="com">// 使用 tree() 方式</span><span class="pln">
$</span><span class="pun">(</span><span class="str">'#tree'</span><span class="pun">).</span><span class="pln">tree</span><span class="pun">(</span><span class="str">'collapse'</span><span class="pun">,</span><span class="pln"> params</span><span class="pun">);</span></code></pre><h5>切换节点</h5><p>使得节点在展开或折叠的状态间切换。</p><p>方法可用形式如下：</p><ul>
<li><strong>toggle()</strong></li>
<li><strong>toggle(params)</strong></li>
<li><strong>toggle(params, disabledAnimate)</strong></li>
</ul><p>参数定义如下：</p><ul>
<li><code>params</code>：一个jQuery<code>&lt;li&gt;</code>对象，指定需要切换的节点，当不使用此参数时则切换所有节点；</li>
<li><code>disabledAnimate</code>：是否禁用动画，默认 <code>false</code>；</li>
</ul><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="com">// 使用 tree 实例</span><span class="pln">
</span><span class="kwd">var</span><span class="pln"> myTree </span><span class="pun">=</span><span class="pln"> $</span><span class="pun">(</span><span class="str">'#tree'</span><span class="pun">).</span><span class="pln">data</span><span class="pun">(</span><span class="str">'zui.tree'</span><span class="pun">);</span><span class="pln">
myTree</span><span class="pun">.</span><span class="pln">toggle</span><span class="pun">(</span><span class="pln">params</span><span class="pun">);</span><span class="pln">

</span><span class="com">// 使用 tree() 方式</span><span class="pln">
$</span><span class="pun">(</span><span class="str">'#tree'</span><span class="pun">).</span><span class="pln">tree</span><span class="pun">(</span><span class="str">'toggle'</span><span class="pun">,</span><span class="pln"> params</span><span class="pun">);</span></code></pre><h5>展示节点</h5><p>展开当前节点及所有子节点。</p><p>方法可用形式如下：</p><ul>
<li><strong>show()</strong></li>
<li><strong>show(params)</strong></li>
<li><strong>show(params, disabledAnimate)</strong></li>
</ul><p>参数定义如下：</p><ul>
<li><code>params</code>：一个jQuery<code>&lt;li&gt;</code>对象，指定需要展示的节点，当不使用此参数时则展示所有节点；</li>
<li><code>disabledAnimate</code>：是否禁用动画，默认 <code>false</code>；</li>
</ul><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="com">// 使用 tree 实例</span><span class="pln">
</span><span class="kwd">var</span><span class="pln"> myTree </span><span class="pun">=</span><span class="pln"> $</span><span class="pun">(</span><span class="str">'#tree'</span><span class="pun">).</span><span class="pln">data</span><span class="pun">(</span><span class="str">'zui.tree'</span><span class="pun">);</span><span class="pln">
myTree</span><span class="pun">.</span><span class="pln">show</span><span class="pun">(</span><span class="pln">params</span><span class="pun">);</span><span class="pln">

</span><span class="com">// 使用 tree() 方式</span><span class="pln">
$</span><span class="pun">(</span><span class="str">'#tree'</span><span class="pun">).</span><span class="pln">tree</span><span class="pun">(</span><span class="str">'show'</span><span class="pun">,</span><span class="pln"> params</span><span class="pun">);</span></code></pre><h5>添加节点</h5><p>向树添加节点有两种方式：一种是通过 jQuery 方式向树中插入符合树所要求的 DOM 节点即可；另一种方式使用树实例方法 <code>add($element, items)</code> 添加节点数据，该方法的可选形式为：</p><ul>
<li><strong>add($element, items)</strong></li>
<li><strong>add($element, items, expand)</strong></li>
<li><strong>add($element, items, expand, disabledAnimate)</strong></li>
</ul><p>最后三个参数可以依次省略，参数定义如下：</p><ul>
<li><code>$element</code>：要插入的父节点（jQuery 实例），可以为 <code>&lt;ul&gt;</code> 或 <code>&lt;li&gt;</code>；</li>
<li><code>items</code>：数组，要插入的节点数据；</li>
<li><code>expand</code>，插入后是否立即展开；</li>
<li><code>disabledAnimate</code>：插入后如果需要立即展开是否禁用动画效果。</li>
</ul><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="com">// 获取 tree 实例</span><span class="pln">
</span><span class="kwd">var</span><span class="pln"> myTree </span><span class="pun">=</span><span class="pln"> $</span><span class="pun">(</span><span class="str">'#myTree'</span><span class="pun">).</span><span class="pln">data</span><span class="pun">(</span><span class="str">'zui.tree'</span><span class="pun">);</span><span class="pln">

</span><span class="com">// 准备插入的数据</span><span class="pln">
</span><span class="kwd">var</span><span class="pln"> newItems </span><span class="pun">=</span><span class="pln"> </span><span class="pun">[{</span><span class="pln">title</span><span class="pun">:</span><span class="pln"> </span><span class="str">'新的节点'</span><span class="pun">},</span><span class="pln"> </span><span class="pun">...];</span><span class="pln">

</span><span class="com">// 插入数据到根节点</span><span class="pln">
myTree</span><span class="pun">.</span><span class="pln">add</span><span class="pun">(</span><span class="str">'#myTree'</span><span class="pun">,</span><span class="pln"> newItems</span><span class="pun">);</span></code></pre><h5>导出树数据</h5><p>当添加了新的节点或者移除了节点之后，如果此时需要获取当前树更新后的数据，可以使用 <code>toData([$ul], [filter])</code> 方法。该方法拥有如下形式：</p><ul>
<li><strong>toData()</strong></li>
<li><strong>toData($ul)</strong></li>
<li><strong>toData(filter)</strong></li>
<li><strong>toData($ul, filter)</strong></li>
</ul><p>参数定义如下：</p><ul>
<li><strong>$ul</strong>：指定树种需要导出数据的 <code>&lt;ul&gt;</code> 节点。默认为树的根节点，及导出整个树的所有节点数据。</li>
<li><strong>filter</strong>：指定一个回调函数用于转换数据为合适的格式。该回调函数包括两个参数：<code>item</code>，正在导出的节点数据；<code>$li</code>，正在导出的 <code>&lt;li&gt;</code> 节点对象；必须在此回调函数中返回一个 JavaScript 对象。</li>
</ul><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="com">// 获取 tree 实例</span><span class="pln">
</span><span class="kwd">var</span><span class="pln"> myTree </span><span class="pun">=</span><span class="pln"> $</span><span class="pun">(</span><span class="str">'#myTree'</span><span class="pun">).</span><span class="pln">data</span><span class="pun">(</span><span class="str">'zui.tree'</span><span class="pun">);</span><span class="pln">

</span><span class="com">// 此处可以更新数结构</span><span class="pln">

</span><span class="com">// 获取更新后的树数据</span><span class="pln">
</span><span class="kwd">var</span><span class="pln"> myTreeData </span><span class="pun">=</span><span class="pln"> myTree</span><span class="pun">.</span><span class="pln">toData</span><span class="pun">(</span><span class="kwd">function</span><span class="pun">(</span><span class="pln">item</span><span class="pun">,</span><span class="pln"> $li</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    item</span><span class="pun">.</span><span class="pln">_id </span><span class="pun">=</span><span class="pln"> $li</span><span class="pun">.</span><span class="pln">data</span><span class="pun">(</span><span class="str">'id'</span><span class="pun">);</span><span class="pln">
    </span><span class="kwd">return</span><span class="pln"> item</span><span class="pun">;</span><span class="pln">
</span><span class="pun">});</span></code></pre><h4>事件</h4><div class="table-responsive"><table class="table table-bordered">
  <thead>
    <tr>
      <th>事件</th>
      <th>jquery事件名称</th>
      <th>说明</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><code>expand</code></td>
      <td><code>expand.zui.tree</code></td>
      <td>当菜单展开之后会触发此事件</td>
    </tr>
    <tr>
      <td><code>collapse</code></td>
      <td><code>collapse.zui.tree</code></td>
      <td>当菜单被折叠之后会触发此事件</td>
    </tr>
  </tbody>
</table></div><h5>监听事件</h5><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="com">// 通过jQuery方法绑定事件</span><span class="pln">
$</span><span class="pun">(</span><span class="str">'#tree'</span><span class="pun">).</span><span class="pln">on</span><span class="pun">(</span><span class="str">'expand.zui.tree'</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(){...});</span><span class="pln">

</span><span class="com">// 通过参数指定事件回调方法</span><span class="pln">
$</span><span class="pun">(</span><span class="str">'#tree'</span><span class="pun">).</span><span class="pln">tree</span><span class="pun">({</span><span class="pln">expand</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(){...}});</span></code></pre></article></section>






















<section><header><h3>数据加载与更新</h3></header><article><h4>使用数据初始化</h4><p>在初始化树形菜单时可以使用 <code>data</code> 选项来指定用户构建树的数据。这种方式允许你在恰当时机来展示树（例如从远处服务器获取数据再进行展示）。</p><p>用户初始化的数据为一个数组，每个数组中包含若干个对象来用于创建树中的节点（以下简称为节点对象）。</p><p>节点对象中可能包含的属性如下：</p><div class="table-responsive"><table class="table table-bordered">
  <thead>
    <tr>
      <th style="width: 90px">属性</th>
      <th style="width: 250px">可取的值示例</th>
      <th>说明</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><code>title</code></td>
      <td><code>'第一个节点'</code></td>
      <td>在节点上展示的文本。</td>
    </tr>
    <tr>
      <td><code>url</code></td>
      <td><code>'http://zui.sexy'</code></td>
      <td>可选，以链接的形式显示节点，指定链接地址。</td>
    </tr>
    <tr>
      <td><code>html</code></td>
      <td><code>'&lt;strong&gt;着重强调的节点&lt;/strong&gt;'</code></td>
      <td>可选，用于设置为节点 HTML 的内容，如果指定此选项，则 <code>title</code> 选项可以省略。</td>
    </tr>
    <tr>
      <td><code>children</code></td>
      <td><code>[{title: '子节点1'}, {title: '子节点2'}, ...]</code></td>
      <td>可选，以数组的形式设置该节点下的所有子节点，子节点的设置方式与初始化数据一致。这种递归结构与树本身的嵌套结构一致。</td>
    </tr>
    <tr>
      <td><code>open</code></td>
      <td><code>true</code>，<code>false</code>（默认）</td>
      <td>可选，如果该节点包含子节点，是否展开当前节点。</td>
    </tr>
    <tr>
      <td><code>id</code></td>
      <td>默认不设置</td>
      <td>用于设置到树节点 <code>&lt;li&gt;</code> 上的 <code>[data-id]</code> 属性的值，如果设置此属性请确保每一个节点的值在整个树种唯一。</td>
    </tr>
  </tbody>
</table></div><p>除了以上已经定义的命名属性，你仍然可以在节点数据中包含自定义的属性和数据。</p><p>以下代码演示了使用数据来初始化一个空的 <code>&lt;ul class="tree"&gt;</code>：</p><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="com">&lt;!-- 创建一个空的树，需要包含 .tree CLASS --&gt;</span><span class="pln">
</span><span class="tag">&lt;ul</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"tree"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"myTree"</span><span class="tag">&gt;&lt;/ul&gt;</span></code></pre><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="kwd">var</span><span class="pln"> myTreeData </span><span class="pun">=</span><span class="pln"> </span><span class="pun">[{</span><span class="pln">
    title</span><span class="pun">:</span><span class="pln"> </span><span class="str">'水果'</span><span class="pun">,</span><span class="pln">
    url</span><span class="pun">:</span><span class="pln"> </span><span class="str">'http://zui.sexy'</span><span class="pun">,</span><span class="pln">
    open</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">true</span><span class="pun">,</span><span class="pln">
    children</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="pln">
        </span><span class="pun">{</span><span class="pln">title</span><span class="pun">:</span><span class="pln"> </span><span class="str">'橘子'</span><span class="pun">},</span><span class="pln">
        </span><span class="pun">{</span><span class="pln">
            title</span><span class="pun">:</span><span class="pln"> </span><span class="str">'瓜'</span><span class="pun">,</span><span class="pln">
            children</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="pln">
              </span><span class="pun">{</span><span class="pln">title</span><span class="pun">:</span><span class="pln"> </span><span class="str">'西瓜'</span><span class="pun">},</span><span class="pln">
              </span><span class="pun">{</span><span class="pln">title</span><span class="pun">:</span><span class="pln"> </span><span class="str">'黄瓜'</span><span class="pun">}</span><span class="pln">
            </span><span class="pun">]</span><span class="pln">
        </span><span class="pun">}</span><span class="pln">
    </span><span class="pun">]</span><span class="pln">
</span><span class="pun">},</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    title</span><span class="pun">:</span><span class="pln"> </span><span class="str">'坚果'</span><span class="pun">,</span><span class="pln">
    children</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="pln">
        </span><span class="pun">{</span><span class="pln">title</span><span class="pun">:</span><span class="pln"> </span><span class="str">'向日葵'</span><span class="pun">},</span><span class="pln">
        </span><span class="pun">{</span><span class="pln">title</span><span class="pun">:</span><span class="pln"> </span><span class="str">'瓜子'</span><span class="pun">}</span><span class="pln">
    </span><span class="pun">]</span><span class="pln">
</span><span class="pun">},</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    title</span><span class="pun">:</span><span class="pln"> </span><span class="str">'蔬菜'</span><span class="pln">
</span><span class="pun">}];</span><span class="pln">

$</span><span class="pun">(</span><span class="str">'#myTree'</span><span class="pun">).</span><span class="pln">tree</span><span class="pun">({</span><span class="pln">data</span><span class="pun">:</span><span class="pln"> myTreeData</span><span class="pun">});</span></code></pre><h4>动态更新数据</h4><p>当树初始化之后，仍然可以使用 <code>reload(data)</code> 方法来动态更新数据。</p><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="com">// 获取 tree 实例</span><span class="pln">
</span><span class="kwd">var</span><span class="pln"> myTree </span><span class="pun">=</span><span class="pln"> $</span><span class="pun">(</span><span class="str">'#myTree'</span><span class="pun">).</span><span class="pln">data</span><span class="pun">(</span><span class="str">'zui.tree'</span><span class="pun">);</span><span class="pln">

</span><span class="com">// 准备新的数据</span><span class="pln">
</span><span class="kwd">var</span><span class="pln"> myNewTreeData </span><span class="pun">=</span><span class="pln"> </span><span class="pun">[...];</span><span class="pln">

</span><span class="com">// 更新数据</span><span class="pln">
myTree</span><span class="pun">.</span><span class="pln">reload</span><span class="pun">(</span><span class="pln">myNewTreeData</span><span class="pun">);</span></code></pre><h4>使用节点构造器</h4><p>通过节点构造器可以方便的自定义节点的 DOM 内容。使用初始化选项 <code>itemCreator</code> 来定义节点构造器回调函数。节点构造器会在初始化节点数据或更新节点数据时被调用，其形式如下：</p><ul>
<li><strong>function($li, item)</strong></li>
</ul><p>参数定义如下：</p><ul>
<li><code>$li</code>：当前正在构造的节点实例；</li>
<li><code>item</code>：当前用于构建的节点数据。</li>
</ul><p>通过在节点构造器回调函数中直接操作节点实例来构造节点：</p><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="com">// 初始化选项中定义构造器回调函数</span><span class="pln">
$</span><span class="pun">(</span><span class="str">'#myTree'</span><span class="pun">).</span><span class="pln">tree</span><span class="pun">({</span><span class="pln">
    data</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[...],</span><span class="pln">
    itemCreator</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(</span><span class="pln">$li</span><span class="pun">,</span><span class="pln"> item</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
        $li</span><span class="pun">.</span><span class="pln">append</span><span class="pun">(</span><span class="pln">$</span><span class="pun">(</span><span class="str">'&lt;a/&gt;'</span><span class="pun">,</span><span class="pln"> </span><span class="pun">{</span><span class="pln">href</span><span class="pun">:</span><span class="pln"> item</span><span class="pun">.</span><span class="pln">url</span><span class="pun">}).</span><span class="pln">text</span><span class="pun">(</span><span class="pln">item</span><span class="pun">.</span><span class="pln">title</span><span class="pun">));</span><span class="pln">

        </span><span class="com">// return false; // 如果要忽略当前节点，可以通过返回 false 来实现</span><span class="pln">
    </span><span class="pun">}</span><span class="pln">
</span><span class="pun">})</span></code></pre><h4>移除或清空节点</h4><p>直接使用 jQuery 选择需要移除的节点，调用 jQuery 实例上的 <code>remove()</code> 或 <code>empty()</code> 方法。</p><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="com">// 移除其中一个节点</span><span class="pln">
$</span><span class="pun">(</span><span class="str">'#myTree li[data-id="myTreeNodeId"]'</span><span class="pun">).</span><span class="pln">remove</span><span class="pun">();</span><span class="pln">

</span><span class="com">// 清空整个树节点</span><span class="pln">
$</span><span class="pun">(</span><span class="str">'#myTree'</span><span class="pun">).</span><span class="pln">empty</span><span class="pun">();</span></code></pre></article></section></div>


</section>
{/block}